首先在head標籤內貼上

        <style>
        .tags-input {
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        border-width: 1px;
        border-radius: .25rem;
        padding-left: .5rem;
        padding-right: 1rem;
        padding-top: .5rem;
        padding-bottom: .25rem;
        }

        .tags-input-tag {
        display: inline-flex;
        line-height: 1;
        align-items: center;
        font-size: .875rem;
        background-color: #bcdefa;
        color: #1c3d5a;
        border-radius: .25rem;
        user-select: none;
        padding: .25rem;
        margin-right: .5rem;
        margin-bottom: .25rem;
        }

        .tags-input-tag:last-of-type {
        margin-right: 0;
        }

        .tags-input-remove {
        color: #2779bd;
        font-size: 1.125rem;
        line-height: 1;
        }

        .tags-input-remove:first-child {
        margin-right: .25rem;
        }

        .tags-input-remove:last-child {
        margin-left: .25rem;
        }

        .tags-input-remove:focus {
        outline: 0;
        }

        .tags-input-text {
        flex: 1;
        outline: 0;
        padding-top: .25rem;
        padding-bottom: .25rem;
        margin-left: .5rem;
        margin-bottom: .25rem;
        min-width: 10rem;
        }

        .py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    </style>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.5.1/tailwind.css">

這些事需要用到的css，(也別忘了放入alpine.js的連結喔!)

接著在body中貼上下方這串。

<div x-data="{tags: ['hey'], newTag: '' }" class="bg-grey-lighter px-8 py-16 min-h-screen">
    <template x-for="tag in tags">
        <input type="hidden" name="tags[]" :value="tag">
    </template>

    <div class="max-w-sm w-full mx-auto">
        <div class="tags-input">
            <template x-for="tag in tags" :key="tag">
                <span class="tags-input-tag">
                    <span x-text="tag"></span>
                    <button type="button" class="tags-input-remove" @click="tags = tags.filter(i => i !== tag)">
                        &times;
                    </button>
                </span>
            </template>

            <input class="tags-input-text" placeholder="Add tag..."
                @keydown.enter.prevent="if (newTag.trim() !== '') tags.push(newTag.trim()); newTag = ''"
                @keydown.backspace="if (newTag.trim() === '') tags.pop()" x-model="newTag">
        </div>
    </div>
</div>

那我們只看功能向的部分，
x-data="{tags: ['hey'], newTag: '' }"在x-data中先定義了裡面會用地的數據，
再來遇到迴圈
<template x-for="tag in tags"> <input type="hidden" name="tags[]" :value="tag"> </template>
讓input裡面輸入後就放進去tags中，並設value為tag。

在下方還有一個迴圈，

<template x-for="tag in tags" :key="tag">
    <span class="tags-input-tag">
        <span x-text="tag"></span>
        <button type="button" class="tags-input-remove" @click="tags = tags.filter(i => i !== tag)">
            &times;
        </button>
    </span>
</template>

這迴圈將tags裡面的數據一項一項列出，
且後面有的移除的button，
寫上的點擊事件@click="tags = tags.filter(i => i !== tag)"，
意思是點擊後就會過濾當下的tag，
由此就可把對應的tag從畫面上移除。

最後看到

<input class="tags-input-text" placeholder="Add tag..."
    @keydown.enter.prevent="if (newTag.trim() !== '') tags.push(newTag.trim()); newTag = ''"
    @keydown.backspace="if (newTag.trim() === '') tags.pop()" x-model="newTag">

這是我們輸入的input box，
底下寫上了
@keydown.enter.prevent="if (newTag.trim() !== '') tags.push(newTag.trim()); newTag = ''"
當你按enter時就會執行後面的東西，
若是if條件成立，tags陣列中會被推進newTag.trim()(後面.trim()會去除空白)，
接著把newTag清空。

@keydown.backspace="if (newTag.trim() === '') tags.pop()" x-model="newTag">
這指出當按下backspace時，
若是if條件成立，在tags陣列中，裡面的tag會從後方倍pop掉，就會從後方被移除掉。

補充.prevent-
在事件監聽器中加入 .prevent 後，將在觸發事件時呼叫 preventDefault 。上述的範例意味著，當使用者點擊核取方塊時，這個核取方塊並不會被選中。

這樣簡易的多選tags就完成了!